<template>
    <section class="group-manage">
        <simple-slot title="圈子管理">
            <Button type="primary" icon="md-paper" @click="doNew">
                发布广告
            </Button>
        </simple-slot>
        <simple-title title="圈子成员列表" :show="true" :num="num" :type="10"></simple-title>
        <Row>
            <Col span="6" v-for="i in list" :key="i.id">
                <manage-item :data="i" :type="1" :cid="id"></manage-item>
            </Col>
        </Row>
        <simple-title title="黑名单" :show="true" :type="5"></simple-title>
        <Row>
            <Col span="6" v-for="i in inlist" :key="i.id">
                <manage-item :data="i" :type="2"></manage-item>
            </Col>
        </Row>
        <simple-title title="新圈友加入审核" :show="true" ></simple-title>
        <Row>
            <Col span="6" v-for="i in inlist" :key="i.id">
                <manage-item :data="i" :type="3"></manage-item>
            </Col>
        </Row>
        <simple-title title="圈子设置" :show="true"></simple-title>
        <div class="middle">
            <Checkbox v-model="check4">勾选开启敏感词过滤</Checkbox>
            <div class="mid-content">
                <ul>
                    <li>
                        <span>敏感设置：<input v-model="sensitive" placeholder="银行卡、汇款"  style="width: 300px;height: 20px;" /></span>
                    </li>
                    <li>
                        <span>圈子主页显示设置：<span>贴子每页显示行数</span><input v-model="pagenum" style="width: 30px;height: 20px" />;置顶显示行数<input v-model="topnum" style="width: 30px;height: 20px" /></span>
                    </li>
                    <li>
                        <span>帖子设置：<span>是否允许使用积分看贴功能</span>
                            <RadioGroup v-model="isji">
                                <Radio label="1">是</Radio>
                                <Radio label="2">否</Radio>
                            </RadioGroup>
                            <span>；已发布的帖子是否允许编辑</span>
                            <RadioGroup v-model="isedit">
                                <Radio label="1">是</Radio>
                                <Radio label="2">否</Radio>
                            </RadioGroup>
                        </span>
                    </li>
                    <li>
                        <span>已发布的帖子是否允许删除</span>
                        <RadioGroup v-model="isdel">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                        <span>；通过审核的帖子编辑后是否需要重新审核</span>
                        <RadioGroup v-model="isnewedit">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                    </li>
                    <li>
                        <span>副圈主对外是否开放申请</span>
                        <RadioGroup v-model="isfuzhu">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                    </li>
                    <li>
                        <span>圈子内容的帖子是否允许转载分享</span>
                        <RadioGroup v-model="iszhuan">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                    </li>
                    <li>
                        <span>是否限制同一IP地址注册的用户只能加入一个</span>
                        <RadioGroup v-model="isip">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                    </li>
                    <li>
                        <span>新加入的会员通过审核后 <input type="text" style="width: 30px;height: 20px" v-model="fabutime"  >分钟后才能发帖</span>
                    </li>
                    <li>
                        <Checkbox v-model="check5">勾选禁止非圈主成员发言</Checkbox>
                        <span>；是否可以评论</span>
                        <RadioGroup v-model="ispinglun">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                        <span>；是否可以回复</span>
                        <RadioGroup v-model="isback">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                    </li>
                </ul>
            </div>
        </div>
        <div class="sub">
            <Button type="error" class="btn"  @click="instance">保存</Button>
        </div>
    </section>
</template>

<script>
    import SimpleSlot from '../../../components/Title/SimpleSlot'
    import SimpleTitle from '../../../components/Title/SimpleTitle'
    import ManageItem from '../../../components/ListItem/ManageItem'
    export default {
        name: "GroupManage",
        components: {
            SimpleSlot,
            SimpleTitle,
            ManageItem
        },
        data () {
          return {
              num:'',
              id:"",
              inlist:[],
              list:[],
              shenlist:[],
              check4:false,
              sensitive:'',
              pagenum:'',
              topnum:"",
              isji:'',
              isedit:"",
              iszhuan:'',
              isdel:'',
              isnewedit:"",
              isfuzhu:'',
              isip:'',
              fabutime:'',
              check5:false,
              ispinglun:'',
              isback:'',
              issen:'',
              isfayan:''
          }
        },
        created () {
          this.getinfo()

        },
        methods :{
            doNew () {

            },
            getinfo() {
                this.id = this.$route.query.id
                let _this =this
                _this.$post('/api/circle/myCircleInfo',
                    {
                        circle_id:5
                    }, function (res) {
                        _this.list = res.data.userlist
                        _this.num = res.data.userlist.length
                        _this.inlist = res.data.heiuserlist
                        _this.shenlist = res.data.shenuserlist
                    }, function (errmsg,) {
                        _this.$message.error(errmsg);
                    })
            },
            instance () {
                this.issen = this.check4 ? 1:2;
                this.isfayan = this.check5 ? 1:2;
                let _this =this
                _this.$post('/api/circle/myCircleInfo',
                    {
                        circle_id:5,
                        issen:_this.issen,
                        sensitive:_this.sensitive,
                        pagenum:_this.pagenum,
                        topnum:_this.topnum,
                        isji:_this.isji,
                        isedit:_this.isedit,
                        isdel:_this.isdel,
                        isnewedit:_this.isnewedit,
                        isfuzhu:_this.isfuzhu,
                        iszhuan:_this.iszhuan,
                        fabutime:_this.fabutime,
                        isfayan:_this.isfayan,
                        ispinglun:_this.ispinglun,
                        isback:_this.isback,
                    }, function (res) {
                        _this.$message.success(res.msg);
                    }, function (errmsg,) {
                        _this.$message.error(errmsg);
                    })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../style/style.less";
    .group-manage {
        border: 1px solid @border-color;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
        .middle{
            margin-top: 30px;
            width:100%;
            overflow: hidden;
        }
        .mid-content ul li{
            margin: 10px 0;
            input{
                margin: 0 5px;
            }
        }
    .inner {
        padding: 10px;
    .thumbs {
        line-height: 1;
        font-size: 0;
        text-align: center;
        padding: 20px 0 15px;
        border-right: 1px solid @border-color;
    &:nth-child(4n) {
         border-right: 1px solid transparent;
     }
    img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
    }
    }
    .details {
    .title {
        font-size: 16px;
        color: @theme-color-dark;
        text-align: center;
    }
    .location {
        font-size: 12px;
        color: #999;
        text-align: center;
    }
    .creator, .count {
        /*margin-bottom: 10px;*/
    }
    .option-btn {
        text-align: center;
        margin-top: 10px;
    .btn {
        display: inline-block;
        border: 1px solid @theme-color;
        height: 28px;
        line-height: 28px;
        padding: 0 15px;
        color: @theme-color;
        border-radius: 4px;
        margin-right: 10px;
    }
    }
    }
    }
    }
</style>